<template>
  <div class="blog">
     <div class="list">
       <div class="item">
         <p class="title">mingzi
           
         </p>
         <p class="time">2021-04-21:kkkkkk  <span class="read">1read</span>
           <span class="read">fenlei</span></p>
         <div class="content">skjnjksdnc</div>
         <button class="btn" @click="goToDetail">阅读全文</button>
       </div>
        <div class="item"> </div>
        <div class="item"> </div>
        <div class="item"> </div>
        <div class="item"> </div>
        <div class="item"> </div>
         <div class="item"> </div>
          <div class="item"> </div>
           <div class="item"> </div>

     </div>
  </div>
</template>

<script>
export default {
  
 data() {
   return {
     displayList:'none',
     urlList:['/blog/source','/blog/record','/blog','about']
   }
 },
 mounted() {
   //this.move()
 },
 methods: {
   list() {
     //this.$router.push('index')
     if(this.displayList === 'none') {
        this.displayList = 'block'
     }else {
       this.displayList = 'none'
     }
   },
   move(e) {
    let x = (e.pageX * -1 / 5), y = (e.pageY * -1 / 5);
    // $(this).css('background-position', x + 'px ' + y + 'px');
    this.$refs.img.style.backgroundPosition = `${x}px ${y}px`
   },
   goToDetail(index) {
     this.$router.push('/blog/detail')
   }
 }
}
</script>

<style lang="less" scoped>
.blog {
  height: 1000px;
  overflow: hidden;
  .list {
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    .item {
      position: relative;
      display: flex;
      flex-direction: column;
    //  justify-content: flex-start;
      width: 100%;
      // height: 300px;
      margin: 10px 0;
      background-color: aliceblue;
      p {
        margin: 0;
        width: 30%;
        text-align: left;
        padding-left: 10px;
      }
      .title {
        font-size: 20px;
        font-weight: 600;
        color: black
      }

      .content {
        text-align: left;
         padding-left: 10px;
      }
      .btn {
         width: 10%;
         align-self: center;
         cursor: pointer;
         border-radius: 10px;
        // position: absolute;
        // bottom: 20px;
      }
    }
  }
}

</style>